<template>
  <div class="base-page">
    <CommonCustomNavHead
      :title="from ? '报告详情' : '测评'" 
      theme="light"
      navBgColor="#51D1E5"
      :prePage="from ? '' : '/pages/index/main'"
      :isTab="from ? false : true"
      :pageOffsetTop="pageOffsetTop" />
    <div class="result-info-wrap">
      <div v-if="!from" class="head-text">
        <div>恭喜您已完成</div>
        <div>本周的健康状况记录</div>
      </div>
      <div v-else class="head-text-wrap">
        <div>{{ created_at }}</div>
        <div>自测</div>
      </div>
      <div class="sum-up-wrap">
        <!-- <div class="title-wrap">
          {{ from ? '' : '本周' }}情况总结
        </div> -->
        <div class="bg-title-box">
          <div class="bg-title">
            {{ from ? '' : '本周' }}情况总结
            <div class="bg" style="background: #ACEFFA"></div>
            <div class="title-font">
              <div class="font">{{ from ? '' : '本周' }}情况总结</div> 
            </div>
          </div>
        </div>
        <div class="level-img-wrap">
          <img class="level-img" :src="`https://www.thuguardian.com/files/small_program/${levelText[week_result].img || 'level-1'}.png`" alt="">
        </div>
        <div class="level-text-wrap">
          <div>总体健康状况</div>
          <div :style="{color: (levelText[week_result].color || '#47B672')}">{{levelText[week_result].text || '表现良好'}}</div>
        </div>
      </div>

      <div class="sum-up-wrap sum-up-wrap-1">
        <!-- <div class="title-wrap">
          表现良好
        </div> -->

        <div class="bg-title-box">
          <div class="bg-title">
            表现良好
            <div class="bg" style="background: #35F1DC"></div>
            <div class="title-font">
              <div class="font">表现良好</div> 
            </div>
          </div>
        </div>
        <div v-if="findData && findData.length > 0" class="level-item-wrap">
          <div v-for="val in findData" :key="val.id" class="level-item">
            <img class="level-item-img" :src="val.img" alt="">
            <div class="level-item-text">{{val.text}}</div>
          </div>
        </div>
        <div v-else class="level-item-wrap">无</div>
      </div>

      <div class="sum-up-wrap sum-up-wrap-2">
        <!-- <div class="title-wrap">
          需要关注
        </div> -->
        <div class="bg-title-box">
          <div class="bg-title">
            需要关注
            <div class="bg" style="background: #FFAEA7"></div>
            <div class="title-font">
              <div class="font">需要关注</div> 
            </div>
          </div>
        </div>
        <div v-if="followData && followData.length > 0" class="level-item-wrap">
          <div v-for="val in followData" :key="val.id" class="level-item level2-item">
            <img class="level-item-img" :src="val.img" alt="">
            <div class="level-item-text">{{val.text}}</div>
          </div>
        </div>
        <div v-else class="level-item-wrap">无</div>
      </div>

      <div class="sum-up-wrap sum-up-wrap-3">
        <!-- <div class="title-wrap">
          严重警示（需立即关注）
        </div> -->

        <div class="bg-title-box">
          <div class="bg-title">
            严重警示（需立即关注）
            <div class="bg" style="background: #FFAEA7"></div>
            <div class="title-font">
              <div class="font">严重警示（需立即关注）</div> 
            </div>
          </div>
        </div>
        <template v-if="warningData && warningData.length > 0">
          <div class="hint-wrap">
            建议您告知家属，尽快就医检查
          </div>
          <div class="level-item-wrap">
            <div v-for="val in warningData" :key="val.id" class="level-item level3-item">
              <img class="level-item-img" :src="val.img" alt="">
              <div class="level-item-text">{{val.text}}</div>
            </div>
          </div>
        </template>
        <div v-else class="level-item-wrap">无</div>
      </div>

      <div class="sum-up-wrap sum-up-wrap-4">
        <!-- <div class="title-wrap">
          温馨提示
        </div> -->
        <div class="bg-title-box">
          <div class="bg-title">
            温馨提示
            <div class="bg" style="background: #E1DC49"></div>
            <div class="title-font">
              <div class="font">温馨提示</div> 
            </div>
          </div>
        </div>
        <div v-if="tip && tip.length > 0" class="hint-contetn-wrap">
          <div v-for="(val, idx) in tip" :key="val.id" class="level-item level3-item">
            <div class="level-item-text">{{ idx+1 }}. {{val}}</div>
          </div>
        </div>
        <div v-else class="level-item-wrap">无</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getTaskInfo } from '@/api/common/index.js'
import CommonCustomNavHead from '@/components/CommonCustomNavHead/index.vue';
import { fmtTimeStamp } from '@/utils/index';
export default {
  components: {
    CommonCustomNavHead
  },
  data() {
    return {
      pageOffsetTop: 0,
      level: 1,
      taskId: '',
      from: '',
      created_at: '',
      levelText: {
        '表现良好': {
          text: '表现良好',
          color: '#47B672',
          img: 'level-1'
        },
        '基本稳定': {
          text: '基本稳定',
          color: '#A7A43A',
          img: 'level-2'
        },
        '需要关注': {
          text: '需要关注',
          color: '#BD3D31',
          img: 'level-3'
        },
      },
      level1Card: [
        {
          id: 1,
          text: '睡眠正常',
          img: 'https://www.thuguardian.com/files/small_program/level-1-1.png'
        },
        {
          id: 2,
          text: '情绪稳定',
          img: 'https://www.thuguardian.com/files/small_program/level-1-2.png'
        },
        {
          id: 3,
          text: '社交活跃',
          img: 'https://www.thuguardian.com/files/small_program/level-1-3.png'
        },
        {
          id: 4,
          text: '服药规律',
          img: 'https://www.thuguardian.com/files/small_program/level-1-4.png'
        },
        {
          id: 5,
          text: '无跌倒风险',
          img: 'https://www.thuguardian.com/files/small_program/level-1-5.png'
        }
      ],
      level2Card: [
        {
          id: 1,
          text: '睡眠问题',
          img: 'https://www.thuguardian.com/files/small_program/level-2-1.png'
        },
        {
          id: 2,
          text: '吞咽问题',
          img: 'https://www.thuguardian.com/files/small_program/level-2-2.png'
        },
        {
          id: 3,
          text: '疼痛问题',
          img: 'https://www.thuguardian.com/files/small_program/level-2-3.png'
        },
        {
          id: 4,
          text: '情绪问题',
          img: 'https://www.thuguardian.com/files/small_program/level-2-4.png'
        },
        {
          id: 5,
          text: '服药依从性',
          img: 'https://www.thuguardian.com/files/small_program/level-2-5.png'
        },
        {
          id: 6,
          text: '跌倒风险',
          img: 'https://www.thuguardian.com/files/small_program/level-2-6.png'
        }
      ],
      level3Card: [
        {
          id: 1,
          text: '跌倒多次',
          img: 'https://www.thuguardian.com/files/small_program/level-3-1.png'
        },
        {
          id: 2,
          text: '持续严重疼痛',
          img: 'https://www.thuguardian.com/files/small_program/level-3-2.png'
        },
        {
          id: 3,
          text: '严重焦虑抑郁',
          img: 'https://www.thuguardian.com/files/small_program/level-3-3.png'
        },
        {
          id: 4,
          text: '吞咽非常困难',
          img: 'https://www.thuguardian.com/files/small_program/level-3-4.png'
        },
      ],
      fine: [],
      follow: [],
      warning: [],
      tip: [],
      week_result: ''
    }
  },
  onLoad(options) {
    this.taskId = options.taskId
    this.from = options.from || ''
    this.handleTaskInfo()
  },
  onPageScroll ({scrollTop}) {
    this.pageOffsetTop = scrollTop
  },
  computed: {
    findData() {
      const list = []
      if (this.fine.length) {
        this.fine.forEach(item => {
          const data = this.level1Card.find(val => val.text == item)
          if (data) {
            list.push(data)
          }
        });
      }
      return list
    },
    followData() {
      const list = []
      if (this.follow.length) {
        this.follow.forEach(item => {
          const data = this.level2Card.find(val => val.text == item)
          if (data) {
            list.push(data)
          }
        });
      }
      return list
    },
    warningData() {
      const list = []
      if (this.warning.length) {
        this.warning.forEach(item => {
          const data = this.level3Card.find(val => val.text == item)
          if (data) {
            list.push(data)
          }
        });
      }
      return list
    },
  },
  methods: {
    async handleTaskInfo() {
      const res = await getTaskInfo({id: this.taskId})

      if (res.code == 200) {
        const { fine, follow, warning, tip, week_result, created_at } = res.data
        console.log(res.data)
        this.fine = fine
        this.follow = follow
        this.warning = warning
        this.tip = tip
        this.week_result = week_result
        this.created_at = fmtTimeStamp(created_at)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.result-info-wrap {
  min-height: 100vh;
  width: 100%;
  padding: 0 16px;
  box-sizing: border-box;
  background: radial-gradient(228.93% 180.92% at -21.2% -33.73%, #A0F2FF 0%, #00AFCB 67.61%);
  padding-bottom: 40px;
}

.head-text {
  margin-bottom: 48px;
  padding-top: 100px;
  box-sizing: border-box;
  padding-left: 15px;
  color: rgba(0, 0, 0, 0.65);
  font-family: "PingFang SC";
  font-size: 20px;
  font-style: normal;
  font-weight: bold;
  line-height: 160%; /* 64px */
}

.head-text-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 88px 15px 0;
  height: 64px;
  color: rgba(0, 0, 0, 0.65);
  font-family: "PingFang SC";
  font-size: 20px;
  font-style: normal;
  font-weight: bold;
  box-sizing: content-box;
}

.sum-up-wrap {
  margin-bottom: 16px;
  width: 100%;
  padding: 12px 14px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 10px;
  // margin-top: 48px;
  .title-wrap {
    color: rgba(0, 0, 0, 0.85);
    font-family: "PingFang SC";
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }

  .hint-contetn-wrap {
    background: #FFFDD0;
    border-radius: 8px;
    padding: 16px;
    box-sizing: border-box;
    color: rgba(0, 0, 0, 0.65);
    font-family: "PingFang SC";
    font-size: 20px;
    line-height: 28px;
    margin-top: 16px;
  }
  
  .level-img-wrap {
    margin: 0 auto;
    margin-top: 32px;
    margin-bottom: 24px;
    width: 245px;
    height: 130px;
    .level-img {
      width: 100%;
      height: 100%;
    }
  }

  .level-text-wrap {
    display: flex;
    align-items: center;
    background: #E5FAF7;
    height: 48px;
    border-radius: 10px;
    padding: 0 16px;
    box-sizing: border-box;
    justify-content: space-between;
    color: rgba(0, 0, 0, 0.65);
    font-family: "PingFang SC";
    font-size: 20px;
  }

  .level-item-wrap {
    width: 100%;
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .level-item {
      width: 150px;
      height: 112px;
      padding: 20px 0;
      box-sizing: border-box;
      text-align: center;
      margin-bottom: 16px;
      background: #E5FAF7;
      border-radius: 10px;

      .level-item-img {
        display: block;
        margin: 0 auto;
        width: 52px;
        height: 52px;
      }

      .level-item-text {
        color: #47B672;
        text-align: center;
        font-size: 20px;
      }
    }

    .level2-item {
      .level-item-text {
        color: #E96C61;
      }
    }

    .level3-item {
      .level-item-text {
        color: #BD3D31;
      }
    }
  }

  .hint-wrap {
    width: 315px;
    height: 48px;
    border-radius: 8px;
    background: #E5FAF7;
    text-align: center;
    color: rgba(0, 0, 0, 0.65);
    font-family: "PingFang SC";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 48px;
    margin: 16px 0;
  }
  
  .bg-title-box {
    display: flex;
    align-items: center;
  }
  .bg-title {
    margin-bottom: 24px;
    height: 23px;
    font-family: "PingFang SC";
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    color: transparent;
    position: relative;
    .bg {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 10px;
      background: #FFC7C2;
      z-index: 10;
    }

    .title-font {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      align-items: center;
      width: 100%;
      height: 23px;
      z-index: 11;
      .font {
        color: rgba(0, 0, 0, 0.85);
        font-family: "PingFang SC";
        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
      }
    }
  }
}
</style>